<template>
  <PageWrapper v-loading="queryLoading" loading-tip="加载中..." content-full-height>
    <div :class="prefixCls">
      <BasicForm @register="registerForm" @submit="handleSubmit" :class="`${prefixCls}-form`"> 
        <template #formFooter>
          <a-button :class="`${prefixCls}-form-submit`" @click="handleSubmit" type="primary" :loading="loading" style="margin-right: 0.9rem">确定</a-button>
          <a-button v-if="isSensitive" @click="handleShowSensitive" type="primary" style="margin-right: 0.9rem">查看</a-button>
        </template>
      </BasicForm>
      <VerifyModal @register="registerVerifyModal" :submitCallback="handleSubmitVerify"/>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import {VerifyModal} from '/@/components/BizVerify';
import {BasicForm, FormSchema} from '/@/components/Form/index';
import {ConfigFormProps, useConfigForm} from '/@/hooks/my/useConfigForm'
import {ConfigKey} from '/@/views/system/config/config.model';
import {useModal} from '/@/components/Modal';
import {useDesign} from '/@/hooks/web/useDesign';
import {PageWrapper} from '/@/components/Page';
import {rules} from '/@/utils/helper/validator';

const emit = defineEmits(['query-success'])

const { prefixCls } = useDesign('gitee')
const [registerVerifyModal, { openModal: openVerifyModal }] = useModal();

const formSchema: FormSchema[] = [
  {
    field: 'name',
    label: "应用名称",
    component: "Input",
    required: true
  },
  {
    field: 'agentId',
    label: 'AgentId',
    component: 'Input',
    required: true
  },
  {
    field: 'appKey',
    label: 'AppKey',
    component: 'Input',
    required: true
  },
  {
    field: 'appSecret',
    label: 'AppSecret',
    component: 'Input',
    required: true
  },

  {
    field: 'authCallbackUrl',
    label: "登录回调地址",
    rules: rules.rule('http', true),
    component: "Input"
  },
];


const configFromProps : ConfigFormProps = {
  configKey: ConfigKey.DINGTALK,
  schemas: formSchema,
  labelWidth: 100
}
const { 
  registerForm, handleSubmit, loading, isSensitive, queryLoading, handleSensitiveConfig 
} = useConfigForm(configFromProps, emit)

const handleShowSensitive = () => {
  openVerifyModal(true, {})
}
const handleSubmitVerify = async (data) => {
  await handleSensitiveConfig(data)
}
</script>


<style lang="less">
  @prefix-cls: ~'@{namespace}-gitee';

  .@{prefix-cls} {
    padding: 10px;
    background-color: @component-background;
    &-form {
      width: 700px;
      &-submit {
        margin-left: 100px;
      }
    }
  }

</style>
